import React, { Component } from 'react'
import { Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native'
import { Button } from '@ant-design/react-native'
import AntDesign from 'react-native-vector-icons/AntDesign'



export default class Collection extends Component {

    state = { collectionMusics: [] }

    componentDidMount() {
        this.props.navigation.addListener('focus', () => {
            let dataUrl = "http://www.khino.cn:8080/comment/api/song/getSongsByUserId/?userId=1"
            fetch(dataUrl).then(resp => resp.json())
                .then(musics => {
                    this.setState({ collectionMusics: musics })
                })
        })
    }

    _renderMusic = ({ item }) =>
        <TouchableOpacity onPress={() => {this.props.navigation.navigate("正在播放", { music: item })}}>
            <View style={{ flexDirection: 'row', height: 60, justifyContent: 'space-between', alignItems: 'center', paddingTop: 5 }}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 23, width: 60, textAlign: 'center', marginRight: 10 }}>{item.songId}</Text>
                    <View >
                        <Text style={{ fontSize: 20 }}>{item.songName}</Text>
                        <Text style={{ fontSize: 12 }}>{item.songSinger}</Text>
                    </View>
                </View>
                <TouchableOpacity>
                    <AntDesign name={"heart"} size={30} color={"#FF0033"} />
                </TouchableOpacity>

            </View>
        </TouchableOpacity>



    _sep = () => <View style={{ height: 1, backgroundColor: '#DDDDDD' }}></View>
    render() {
        return (
            <View style={{ margin: 10, }}>
                <Text style={{ fontSize: 23 }}>我喜欢的歌</Text>
                <FlatList ItemSeparatorComponent={this._sep} data={this.state.collectionMusics} keyExtractor={item => item.songId} renderItem={this._renderMusic} />
            </View>
        )
    }
}
